@import './utils/func';
@import './utils/var';

.page-case {
  .g-slogan {
    img {
      width: 160px;
      opacity: .89;
    }
  }
  .diezi {
    position: absolute; left: $g-left; bottom: $g-bottom;
    margin: 0 0 80px -50px;
    img {
      width: 180px;
    }
  }
  .case{
    &-wrap{
      overflow: hidden;
      position: absolute; top: $g-top + 10%; right: $g-right; bottom: $g-bottom + 10%; left: $g-left;

      .case-scrollbar{
        position: absolute; left: 0; right: 0; bottom: 2px;
        height: 1px;
        font-size: 0; line-height: 0;
        background-color: $text-gray1;
        .bar{
          position: absolute; top: -2px; left: 10%;
          width: 10%; height: 5px;
          background-color: $color-brown;
          transition: all .3s ease;
        }
      }
    }
    &-cate{
      position: absolute;
      width: 150px;
      font-size: 16px;
      li{
        margin-bottom: 10%;
        transition: all .3s ease;
        &:hover{
          transform: translateX(8px);
        }
      }

      &-list{
        margin-left: 150px;

        .item{
          overflow: hidden;
          position: relative;
          float: left;
          width: (100-6)/4 + %;
          margin-right: 2%;
          background-color: #000;

          &:last-child{
            margin-right: 0;
          }
          &:hover{
            .text{
              padding-bottom: 20px;;
            }
            img{
              opacity: .79;
            }
          }
        }
        img{
          width: 100%;
        }
        .text{
          position: absolute; bottom: 0; left: 0; right: 0;
          padding: 0 12px;
          line-height: 28px;
          color: white; text-align: right;
          background-color: $color-brown;
          transition: all .5s ease;
        }
      }

      &-drop{
        position: absolute; top: $g-top; left: $g-left; z-index: 10;
        margin-left: 150px;
        width: 120px;
        color: #fff;
        background-color: $color-brown;
        &.active:after,&.focus:after{
          transform: rotate(180deg);
        }
        &:after{
          content: "";
          position: absolute; top: 18px; right: 8px;
          width: 0; height: 0; font-size: 0; line-height: 0;
          border-top: 8px solid white;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          opacity: .79;
          transition: all .5s;
        }

        a, span{
          font-size: 16px;
          display: block;
          padding: 5px 10px;
          color: #fff;
          transition: all .5s;
        }
        span{
          padding: 10px;
        }
        .droplist{
          border-top: 1px solid $border-color;
          display: none;
          a:hover{
            background-color: #9c6d3a;
          }
        }
      }
    }
    &-slider{
      .case-item{
        position: relative;
        overflow: hidden;
        &:hover{
          .text{
            bottom: 0;
          }
        }

        img{
          display: block;
          width: 100%;
        }
        .text{
          position: absolute; bottom: -32px; left: 0; right: 0;
          height: 32px;
          padding: 0 12px;
          color: white; line-height: 32px;
          @extend %ellipsis;
          background-color: $color-brown;
          transition: all .5s ease;
        }
      }
      &-prev, &-next{
        position: absolute; top: 50%; z-index: 10;
        width: 30px; height: 200px;
        margin-top: -150px;
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: 50% 50%;
        background-color: rgba(0, 0, 0, .01);
        cursor: pointer;
        &.swiper-button-disabled{
          opacity: .5;
          cursor: not-allowed;
        }
      }
      &-prev{
        left: $g-left; margin-left: -42px;
        background-image: url("/@@/images/case/icon_left.png");
      }
      &-next{
        right: $g-right; margin-right: -42px;
        background-image: url("/@@/images/case/icon_right.png")
      }
    }
  }
}